<template>
    
    <!-- 组件的模板 -->
    <div class="page attendance-set form-remind">
       <!--  <div class="weui-cells__title">发送提醒日期</div>
        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" for="x11">
                <div class="weui-cell__hd">
                    <input type="checkbox" class="weui-check" name="checkbox1" id="x11" v-model="inp1" v-on:click="changecheck">
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>按特定日期提醒</p>
                    <p class="tip">可选择日历中的某一天，提醒用户提交表单</p>
                </div>
            </label>
        </div>
        <inline-calendar v-if="inp1"
            :selector-array.sync="list"
            :weeks-list="weeksData"
            :custom-slot-fn="customFn"
            :start-date="today"
            end-date="2096-01-01"
            >
        </inline-calendar>

        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" for="x12">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox1" class="weui-check" id="x12" v-model="inp2" v-on:click="changecheck2">
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>固定日期内每天提醒</p>
                    <p class="tip">在设定时间段内，每天提醒用户提交表单</p>
                </div>
            </label>
        </div>
        <div class="weui-cells" style="margin-top: -1px;" v-if="inp2">
            <a class="weui-cell weui-cell_access" href="javascript:;" @click="beginDataFn">
                <div class="weui-cell__bd">
                    <p v-if="beginData"><span class="title">开始日期</span>{{beginData}}</p>
                    <p v-else><span class="title">开始日期</span><span class="placeholder">请选择</span></p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;" @click="endDataFn">
                <div class="weui-cell__bd">
                    <p v-if="endData"><span class="title">结束日期</span>{{endData}}</p>
                    <p v-else><span class="title">结束日期</span><span class="placeholder">请选择</span></p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
        </div> -->

        <div class="weui-cells__title">发送提醒时间</div>
        <div class="weui-cells remind-time">
            <div class="weui-cell" v-for="time in setupFormInfo.remind_time">
                <span class="bg_sprite icon_time"></span>
                <div class="weui-cell__bd">
                    <p>{{time}}</p>
                </div>
                <span class="bg_sprite btn_delete" v-on:click="removetime($index)"></span>
            </div>
        </div>
        <a class="btn_add com-border-bottom bg-color touch" href="javascript:;" @click="showPicker"><span>添加提醒时间</span></a>
        <p class="tip_1" v-if="isReportPage">每天指定时间提醒成员提交表单</p>
        <p class="tip_1" v-else>每天指定时间提醒成员上报位置</p>
    </div>




    <!-- <div class="weui-cells mr-top-0">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>发送提醒的日期</p>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_checkbox mr-top-0">
        <label class="weui-cell weui-check__label" for="s11">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" v-model="inp1" v-on:click="changecheck">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>特定日期提醒</p>
                <p class="tip">可以选择日历中的某几天，提醒用户提交表单</p>
            </div>

        </label>
    </div>
    <inline-calendar v-if="inp1"
        :selector-array.sync="list"
        :weeks-list="weeksData"
        :custom-slot-fn="customFn"
        :start-date="today"
        end-date="2096-01-01"
        >
    </inline-calendar>
    <div class="weui-cells weui-cells_checkbox mr-top-0">
        <label class="weui-cell weui-check__label" for="s12" >
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="s12" v-model="inp2" v-on:click="changecheck2">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>固定日期内每天提醒</p>
                <p class="tip">在设定时间段内，每天提醒用户提交表单</p>
            </div>
        </label>
    </div>
    <div class="weui-cells mr-top-0" v-if="inp2">
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="beginDataFn">
            <div class="weui-cell__bd">
                <p>起始日期</p>
            </div>
            <div class="weui-cell__ft">{{beginData}}</div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="endDataFn">
            <div class="weui-cell__bd">
                <p>结束日期</p>
            </div>
            <div class="weui-cell__ft">{{endData}}</div>
        </a>
    </div>

    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>发送提醒的时间</p>
                <p class="tip">可以添加多个时间点，一天内提醒多次</p>
            </div>
        </div>
    </div>
    <div class="weui-cells mr-top-0">
        <div class="weui-cell" v-for="time in setupFormInfo.remind_time">
            <div class="weui-cell__hd"><i class="weui-icon-waiting weui-icon_msg"></i></div>
            <div class="weui-cell__bd">
                <p>{{time}}</p>
            </div>
            <div class="weui-cell__ft" v-on:click="removetime($index)"><i class="weui-icon-cancel"></i></div>
        </div>
    </div>
    <div class="form-report">
        <a class="add-item touch" href="javascript:;" @click="showPicker"><span class="icon bg_sprite"></span><span>添加提醒时间</span></a>
    </div> -->
    
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import clientUi from 'gapi/clientUi.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import widget from 'gapi/widget.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'

    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import InlineCalendar from 'components/inline-calendar'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            InlineCalendar
        },
        computed:{
            workDate(){
                return this.list.sort()
            }
        },
        data: function(){
            return{
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                list:[],
                inp1: false, //特定日期提醒
                inp2: false, //固定日期每天提醒
                setupFormInfo: {
                    // form_id: 0,
                    // team_id: 0,
                    // project_id: 0,
                    // group_list: [],
                    // user_list: [],
                    // end_time: '',
                    // is_send_notice: 0, //提交表单是否发送通知0-否1-是
                    // is_can_delete: 0, //表单提交后是否可以删除 0-否 1-是
                    // repeat_submit: 1, //是否可以多次提交 0-否 1-是
                    remind_type: 0, //1-特定日期 2-固定时间段 0-不提醒
                    remind_date: [],
                    remind_time: []
                },
                beginData: '',
                endData: '',
                today: '',
                isRepeat: false,
                isReportPage: true
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                // 更新 上页带来的  默认提醒设置
                let setupFormInfo = util.getUrddataString('setupFormInfo');
                let setupFormInfoObj = JSON.parse(setupFormInfo);
                if(setupFormInfoObj.lastPageType == 1){
                    this.isReportPage = true
                }else{
                    this.isReportPage = false
                }
                if(setupFormInfoObj.remind_type == 1){
                    this.inp1 = true;
                    this.list = setupFormInfoObj.remind_date
                }else if(setupFormInfoObj.remind_type == 2){
                    this.inp2 = true;
                    this.beginData = setupFormInfoObj.remind_date[0]
                    this.endData = setupFormInfoObj.remind_date[1]
                }
                this.setupFormInfo.remind_time = setupFormInfoObj.remind_time

                commonPage.updateTitleBar({
                    //backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                    // leftDisplay: false,            // 是否显示左按钮
                    // leftText: '',                // 左按钮文案
                    //leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '确定',            // 右按钮文案
                    rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                })
                window.saveResume = () => {
                    if(this.isReportPage){
                        //埋点（表单）
                        let statisticsLog_data = {
                            event_id: '表单提醒设置-确定',
                            // event_label: data.event_label,(预留，现在不用传此参数)
                            event_param: {
                                ca_from: 'sure',
                                project_id: JSON.parse(util.getUrddataString('setupFormInfo')).project_id,
                            }
                        }
                        // alert(JSON.stringify(statisticsLog_data))
                        KCApiApp.statisticsLog(statisticsLog_data)

                    }else{
                        
                        //埋点(位置上报)
                        let statisticsLog_data = {
                            event_id: '位置上报管理-确定',
                            // event_label: data.event_label,(预留，现在不用传此参数)
                            event_param: {
                                ca_from: 'sure',
                                project_id: JSON.parse(util.getUrddataString('setupFormInfo')).project_id,
                            }
                        }
                        // alert(JSON.stringify(statisticsLog_data))
                        KCApiApp.statisticsLog(statisticsLog_data);
                    }
                    // this.setupFormInfo.remind_type = this.inp1 ? 1 : this.inp2 ? 2 : 0 ;
                    //验证是否选择提醒日期
                    // if(this.setupFormInfo.remind_type == 1){
                    //     if(this.workDate.length <= 0){
                    //         widget.toast('请至少选择一天')
                    //         return;
                    //     }else{
                    //         this.setupFormInfo.remind_date = this.workDate
                    //     }
                    // }else if(this.setupFormInfo.remind_type == 2){
                    //     if(this.beginData === ''){
                    //         widget.toast('请选择提醒日期')
                    //         return;
                    //     }else{
                    //         if(this.endData === ''){
                    //             widget.toast('请选择结束日期')
                    //             return;
                    //         }else if(this.beginData > this.endData){
                    //             widget.toast('请确认结束日期在开始日期之后')
                    //             return;
                    //         }else{
                    //             this.setupFormInfo.remind_date = []
                    //             this.setupFormInfo.remind_date.push(this.beginData)
                    //             this.setupFormInfo.remind_date.push(this.endData)
                    //         }
                    //     }
                    // }else{
                    //     // this.setupFormInfo.remind_date = []
                    //     // this.setupFormInfo.remind_time = []
                    //     //返回上级  携带数据
                    //     commonPage.goBack(1, this.setupFormInfo)
                    //     return;
                    // }
                    //验证是否选择提醒时间
                    // if(this.setupFormInfo.remind_time.length <= 0){
                    //     widget.toast('请至少选择一个时间点进行提醒')
                    //     return;
                    // }
                    
                    //返回上级  携带数据

                    commonPage.goBack(1, this.setupFormInfo)
                }
                
                let date = new Date()
                let timestr = date.getTime()
                this.today = util.getLocalTime(timestr, 'yyyy-MM-dd')
                
            },
            changecheck (){
                this.inp2 = this.inp2 ? !this.inp2 : this.inp2;
            },
            changecheck2 (){
                this.inp1 = this.inp1 ? !this.inp1 : this.inp1;
            },
            removetime(index){
                this.setupFormInfo.remind_time.splice(index,1)
            },
            showPicker (){

                let time = {
                    data1: [],
                    data2: []
                }
                let select = [20,0]
                for(let i = 0;i < 24;i ++ ){
                    i = i < 10 ? '0' + i : i;
                    time.data1.push(i)
                }
                for(let i = 0;i < 60;i ++ ){
                    i = i < 10 ? '0' + i : i;
                    time.data2.push(i)
                }
                
                clientUi.showPicker(time, select, "请选择时间", (data) => {
                    
                    if(this.isReportPage){                        
                        //埋点
                        let statisticsLog_data = {
                            event_id: '表单提醒设置-添加提醒时间',
                            // event_label: data.event_label,(预留，现在不用传此参数)
                            event_param: {
                                ca_from: 'addpushtime',
                                project_id: JSON.parse(util.getUrddataString('setupFormInfo')).project_id,
                            }
                        }
                        // alert(JSON.stringify(statisticsLog_data))
                        KCApiApp.statisticsLog(statisticsLog_data)
                    }
                    if(data&&data.data1 !== undefined){
                        let t = time.data1[data.data1] + ':' + time.data2[data.data2]
                        if(this.setupFormInfo.remind_time.length != 0){
                            this.setupFormInfo.remind_time.forEach((obj) => {
                                if(t == obj){
                                    this.isRepeat = true
                                    return
                                }
                            })
                            if(!this.isRepeat){                                
                                this.setupFormInfo.remind_time.push(t)              
                            }
                            this.isRepeat = false
                        }else{
                            this.setupFormInfo.remind_time.push(t)
                        }
                    }
                    
                })
            },
            beginDataFn (){
                //minDate, maxDate, defaultDate, callBack
                KCApiApp.showDatePicker(this.today, '2019-11-10', this.beginData || this.today, (data) => {
                    // alert(JSON.stringify(data.SelectedDate))
                    // this.setupFormInfo.remind_time.push(data.SelectedDate)
                    this.beginData = data.SelectedDate
                })
            },
            endDataFn (){
                if(this.beginData){
                    KCApiApp.showDatePicker(this.beginData, '2019-11-10', this.endData || this.beginData, (data) => {
                        this.endData = data.SelectedDate
                    })
                }else{
                    widget.toast('请先选择起始日期')
                }
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/calendar.css"></style> -->
<style type="text/css">
/*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
.vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}
</style>
<!-- <style src="../../static/css/common.css"></style> -->
<style type="text/css">
    html {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    body {
        font-family: -apple-system-font, "Helvetica Neue", "Microsoft Yahei", sans-serif;
        font-size: 14px;
        background: #f2f2f2;
        color: #333;
    }
    html, body {
        height: 100%;
    }
    input, textarea, select, button {
        font-size: 16px;
        font-family: -apple-system-font, "Helvetica Neue", "Microsoft Yahei", sans-serif;
        color: #333;
    }
    input:focus, textarea:focus {
        outline: none;
    }
    textarea {
        resize: none;
    }
    ::-webkit-input-placeholder {
        color: #ccc;
    }
    ol, ul {
        list-style: none;
    }
    a {
        color: #333;
    }
    em {
        font-style: normal;
    }
    .page {
        overflow: hidden;
    }
    .page.show-navbar {
        padding-top: 40px;
    }
    .page.show-tabbar {
        padding-bottom: 44px;
    }
    .red-dot {
        display: inline-block;
        min-width: 18px;    
        height: 18px;   
        line-height: 18px;
        padding: 0 5px;
        box-sizing: border-box;
        text-align: center;
        background: #f40;
        font-size: 13px;
        color: #fff;
        border-radius: 9px;
    }
    .touch {
        background: #fff;
    }
    .touch:active {
        background: #fafafa !important;
    }
    .mod-btn-box {
        padding: 30px 20px;
    }
    .link-access {
        position: relative;
    }
    .link-access::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-width: 2px 2px 0 0;
        border-style: solid;
        border-color: rgb(204, 204, 204);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        right: 12px;
        top: 50%;
        margin: -4px 2px 0 0;
    }
    .bg_sprite, .hierarchy::before, .btn_add::before {
        background-image: url(../../static/imgs/sprite2.png);
        background-repeat: no-repeat;
        -webkit-background-size: 250px auto;
        background-size: 250px auto;
    }
    .bg-color {
        background: #fff !important;
    }

    /* reset weui */
    .weui-cells__title {
        color: #999;
        margin: 0;
        line-height: 20px;
        padding: 14px 12px 6px;
    }
    .weui-cells__title span {
        margin-right: 14px;
    }
    .weui-cells {
        font-size: 16px;
        line-height: 1.5;
        margin-top: 12px;
    }
    .weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
        border-color: #e5e5e5;
    }
    .weui-cell {
        padding: 12px;
    }
    .weui-cell:before {
        left: 12px;
    }
    .weui-cells_form .weui-cell__ft {
        line-height: 0;
    }
    .weui-cells_checkbox .weui-cell:before {
        left: 47px;
    }
    .weui-cell_select {
        padding: 0;
    }
    .weui-cell_select-after {
        padding-left: 12px;
    }
    .weui-select {
        height: 48px;
        line-height: 48px;
    }
    .weui-cell_select .weui-cell__bd:after {
        right: 12px;
    }
    .weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
        background-color: #fafafa;
    }
    .weui-cell__bd {
        overflow: hidden;
    }
    .weui-cell__bd p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .weui-cell__bd .title, .weui-label {
        color: #999;
        display: inline-block;
        width: auto;
        min-width: 64px;
        margin-right: 18px;
    }
    .weui-cell__bd .placeholder {
        color: #ccc;
    }
    .weui-input {
        height: 1.5em;
        line-height: 1.5;
    }
    .weui-btn_primary {
        background-color: #fa0;
    }
    .weui-btn_primary:not(.weui-btn_disabled):active {
        background-color: #f90;
    }
    .weui-btn_disabled.weui-btn_primary {
        background-color: rgba(255, 170, 0, 0.4);
    }
    .weui-btn_disabled.weui-btn_primary.fixed {
        background: #fd9;
    }
    .weui-btn_primary:after, .weui-btn_warn:after {
        display: none;
    }
    .weui-btn.fixed {
        position: fixed;
        z-index: 99;
        width: 100%;
        border-radius: 0;
        left: 0;
        bottom: 0;
    }
    .weui-btn.fixed::after {
        display: none;
    }
    .weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
        color: #fa0;
    }
    .weui-tabbar {
        position: fixed;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
        color: #fa0;
    }
    .weui-search-bar__cancel-btn {
        color: #333;
        font-size: 16px;
    }
    .weui-cell_switch {
        padding: 8px 12px;
    }
    .weui-switch:checked {
        background-color: #fa0;
        border-color: #fa0;
    }
    .weui-mask {
        background: rgba(0, 0, 0, 0.5);
    }
    .weui-dialog__hd {
        font-size: 18px;
        line-height: 24px;
        padding: 25px 18px 10px;
    }
    .weui-dialog__bd {
        font-size: 16px;
        line-height: 22px;
        min-height: 0;
        padding: 0 18px 15px;
    }
    .weui-dialog__bd:first-child {
        padding: 25px 18px 15px;
        color: #999;
    }
    .weui-cell__ft {
        color: #bbb;
        font-size: 14px;
        line-height: 24px;
    }
    .weui-dialog__ft:after, .weui-dialog__btn:after {
        border-color: #e5e5e5;
    }
    .weui-dialog__btn_default {
        color: #999;
    }
    .weui-dialog__btn_primary {
        color: #333;
    }
    .searchbar {
        position: relative;
    }
    .weui-search-bar {
        background-color: #f2f2f2;
    }
    .weui-search-bar::before, .weui-search-bar::after {
        border-color: #e5e5e5;
    }
    .weui-search-bar__label, .weui-icon-search {
        color: #ccc;
    }
    .weui-search-bar__label span {
        line-height: 26px;
    }
    .searchbar-result {
        width: 100%;
        font-size: 14px;
        margin-top: 0;
        position: absolute !important;
        left: 0;
        top: 44px;
        z-index: 10;
    }
    .searchbar-result .keyword {
        color: #fa0;
    }
    .weui-cells_checkbox .weui-cell__hd {
        padding-right: 0;
    }
    [class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
        margin: 0 12px 0 0;
    }
    .weui-icon-search:before {
        margin: 0;
    }

    /* mod-tabs */
    .mod-tabs {
        display: -webkit-box;
        display: flex;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 99;
    }
    .mod-tabs li {
        -webkit-box-flex: 1;
        flex: 1;
        text-align: center;
    }
    .mod-tabs a {
        display: block;
        height: 40px;
        line-height: 40px;
        color: rgba(153, 153, 153, 0.9);
    }
    .mod-tabs a.current {
        color: rgb(102, 102, 102);
        box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
        font-weight: bold;
    }

    /* border */
    [class*="com-border-"] {
        position: relative;
        overflow: hidden;
    }
    .com-border-top::before, .com-border-bottom::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: rgb(229, 229, 229);   
        left: 0;
        -webkit-transform: scale3d(1, 0.5, 1);
        transform: scale3d(1, 0.5, 1);  
        z-index: 9;
    }
    .com-border-top::before {
        top: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .com-border-bottom::after {
        bottom: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    .com-border-outside::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        border: 1px solid rgb(229, 229, 229);
        box-sizing: border-box;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        left: 0;
        top: 0;
    }
    [class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
        left: 12px;
    }

    /* upload pic */
    .upload-pic {
        background: #fff;
        padding: 15px 0 8px 12px;
        overflow: hidden;
        position: relative;
    }
    .upload-pic h2 {    
        font-weight: normal;
        font-size: 16px;
        line-height: 22px;
        color: #999;
        margin-bottom: 20px;
    }
    .upload-pic .pic-list {
        overflow: visible;
    }
    .upload-pic .pic-list li {
        float: left;
        margin: 0 12px 12px 0;
        position: relative;
    }
    .upload-pic .pic-list img {
        display: block;
        width: 60px;
        height: 60px;
    }
    .upload-pic .btn-delete {
        width: 18px;
        height: 18px;
        background: #ccc;
        border-radius: 50%;
        position: absolute;
        right: -8px;
        top: -10px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
        content: "";
        position: absolute;
        background: #fff;
        border-radius: 1px;
        left: 50%;
        top: 50%;
    }
    .upload-pic .btn-delete::before {
        width: 10px;
        height: 2px;
        margin: -1px 0 0 -5px;
    }
    .upload-pic .btn-delete::after {
        width: 2px;
        height: 10px;
        margin: -5px 0 0 -1px;
    }
    .uploader {
        width: 60px;
        height: 60px;
        float: left;
        margin: 0 12px 12px 0;
        position: relative;
        background: #fff;
    }
    .uploader input {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        outline: none;
        opacity: 0;
    }
    .uploader div::before, .uploader div::after {
        content: "";
        position: absolute;
        background: rgb(204, 204, 204);
        left: 50%;
        top: 50%;
        border-radius: 2px;
    }
    .uploader div::before {
        width: 28px;
        height: 2px;
        margin: -1px 0 0 -14px;
    }
    .uploader div::after {
        width: 2px;
        height: 28px;
        margin: -14px 0 0 -1px;
    }
    .uploader::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        border: 1px solid rgb(204, 204, 204);
        box-sizing: border-box;
        left: 0;
        top: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    /* calendar */
    .inline-calendar {
        overflow: hidden;
    }
    .inline-calendar table {
        color: #333;
        margin-bottom: 5px;
    }
    .calendar-header {
        font-size: 16px;
        line-height: normal;
        text-align: center;
    }
    .calendar-header > div {
        line-height: 22px;
        padding: 16px 22px 6px;
        float: none;
        width: auto;
        display: inline-block;
        position: relative;
        margin: 0 10px;
    }
    .calendar-title {
        line-height: inherit;
        padding: 0 20px;    
    }
    .vux-prev-icon, .vux-next-icon {
        width: 22px;
        height: 22px;
        border: none;   
        margin: 0;
        -webkit-transform: none;
        transform: none;
        top: 16px;  
    }
    .vux-next-icon {
        right: 0;
    }
    .vux-prev-icon::after, .vux-next-icon::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-width: 0 0 2px 2px;
        border-style: solid;
        border-color: #fa0;
        left: 50%;
        top: 50%;
        margin-top: -4px;
    }
    .vux-prev-icon::after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: -3px;
    }
    .vux-next-icon::after {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        margin-left: -6px;
    }
    .inline-calendar th {
        font-size: 12px;
        color: #ccc;
        padding: 5px 0;
    }
    .inline-calendar td {
        font-size: 14px;
    }
    .inline-calendar td > span {
        width: 27px;
        height: 27px;
        line-height: 27px;  
    }
    .inline-calendar td.current > span, .inline-calendar td.selected > span {   
        background-color: rgba(255, 170, 0, 0.1);
        color: #333;
        position: relative;
    }
    .inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }
    .inline-calendar td.green::after, .inline-calendar td::after {
        width: 5px;
        height: 5px;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
    }
    .inline-calendar td.green::after {
        background: #89c16c;
    }
    .inline-calendar td.red::after {
        background: #f38355;
    }
    .inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
        width: 200%;
        height: 200%;
        border: 1px solid #fa0;
        box-sizing: border-box; 
        left: 0;
        top: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .inline-calendar td.current::after {
        display: none;
    }

    /* tabbar */
    .tabbar {
        width: 100%;    
        background: rgba(255, 255, 255, 0.95);
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .tabbar ul {
        display: -webkit-box;
        display: flex;
    }
    .tabbar li {
        -webkit-box-flex: 1;
        flex: 1;
        position: relative;
    }
    .tabbar a {
        display: block;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #aaa;
    }
    .tabbar li::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 22px;
        background: #e5e5e5;
        -webkit-transform: scale3d(0.5, 1, 1);
        transform: scale3d(0.5, 1, 1);
        right: 0;
        top: 11px;
    }
    .tabbar li:last-child::after {
        display: none;
    }
    .tabbar .icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: rgb(221, 222, 226);
        margin-right: 8px;
    }
    .tabbar a span {
        vertical-align: middle;
    }
    .tabbar .current .icon {
        background: rgb(255, 170, 0);
    }
    .tabbar::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.2);
        left: 0;
        top: 0;
        -webkit-transform: scale3d(1, 0.5, 1);
        transform: scale3d(1, 0.5, 1);
    }

    /* toast */
    .mod-toast {
        width: 100%;
        padding: 0 75px;
        box-sizing: border-box;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        z-index: 9999;
    }
    .mod-toast p {
        display: inline-block;
        background: rgba(17, 17, 17, 0.7);
        padding: 32px 24px; 
        font-size: 16px;
        line-height: 22px;  
        color: #fff;
        border-radius: 5px;
    }

    /* button */
    [class*="mod-btn-s-"] {
        display: inline-block;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        border-radius: 4px;
        position: relative;
    }
    [class*="mod-btn-s-"]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        border-radius: 3px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .mod-btn-s-1 {
        background: rgb(255, 170, 0);
        color: rgb(255, 255, 255);
    }
    .mod-btn-s-1::after, .mod-btn-s-3.selected::after {
        display: none;
    }
    .mod-btn-s-1:active {
        background: rgb(255, 153, 0);
        color: rgba(255, 255, 255, 0.6);
    }
    .mod-btn-s-2 {
        background: rgb(248, 248, 248);
        color: rgb(53, 53, 53);
    }
    .mod-btn-s-2::after {
        border-color: rgba(5, 5, 5, 0.1);
    }
    .mod-btn-s-2:active {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(53, 53, 53, 0.6);
    }
    .mod-btn-s-3 {  
        color: rgb(255, 170, 0);
    }
    .mod-btn-s-3::after {
        border-color: rgb(255, 170, 0);
    }
    .mod-btn-s-3:active {   
        color: #fc6;
    }
    .mod-btn-s-3:active::after {
        color: #fc6;
    }
    .mod-btn-s-3.disabled {
        color: rgb(204, 204, 204);
    }
    .mod-btn-s-3.disabled::after {
        border-color: rgb(204, 204, 204);
    }
    .mod-btn-s-3.selected {
        background: rgb(255, 170, 0);
        color: rgb(255, 255, 255);
    }

    /* empty */
    .mod-empty {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
    }
    .mod-empty .icon {
        display: block;
        width: 115px;
        height: 115px;
        margin: 0 auto 10px;
        background-repeat: no-repeat;
        -webkit-background-size: contain;
        background-size: contain;
    }
    .mod-empty .icon_1 {    
        background-image: url(../../static/imgs/icons/icon_1.png);
    }
    .mod-empty .icon_2 {    
        background-image: url(../../static/imgs/icons/icon_2.png);
    }
    .mod-empty .icon_3 {    
        background-image: url(../../static/imgs/icons/icon_3.png);
    }
    .mod-empty .icon_4 {    
        background-image: url(../../static/imgs/icons/icon_4.png);
    }
    .mod-empty .tip {   
        color: #999;
        font-size: 16px;
        line-height: 22px;
    }
    .mod-empty .tip_2 {
        font-size: 12px;
        line-height: 16px;
        color: #ccc;
        margin-top: 10px;
    }
    .mod-empty .weui-btn {
        width: 150px;
        margin-top: 35px;
    }

    /* crumbs nav */
    .mod-crumbs {
        height: 44px;
        line-height: 44px;
        padding-left: 16px;
        background: #fafafa;
        color: #bbb;
    }
    .mod-crumbs .arrow {
        margin: 0 8px;
        font-family: "Simsun";
    }
    .mod-crumbs a {
        color: #f09835;
    }
</style>
<!-- <style src="../../static/css/attendance.css"></style> -->
<style type="text/css">
    .page.show-topbar {
        padding-top: 44px;
    }
    .topbar {
        width: 100%;
        height: 44px;
        background: #fff;
        position: fixed;
        left: 0;
        top: 0;
        line-height: 44px;
        padding: 0 12px;
        box-sizing: border-box;
    }
    .topbar .date {
        float: left;
        font-size: 16px;
        color: #666;
    }
    .topbar .date .icon-calendar {
        float: left;
        width: 18px;
        height: 18px;
        background-position: 0 0;
        margin: 13px 12px 0 0;
    }
    .topbar .time {
        float: right;
        color: #999;
    }
    .process {
        padding-top: 16px;
        overflow: hidden;
    }
    .process .module {
        margin: 0 12px;
        padding-bottom: 16px;
        position: relative;
    }
    .process .wrap {
        position: relative;
        padding: 15px;
        background: #fff;
        border-radius: 2px;
        margin-left: 30px;
    }
    .process .top {
        height: 30px;
        line-height: 30px;
        overflow: hidden;
    }
    .process .top .title {
        float: left;
    }
    .process .top .fr {
        float: right;
    }
    .process .top .button {
        float: right;
        width: 60px;
        background: #fa0;
        border-radius: 3px;
        color: #fff;
        text-align: center;
    }
    .process .top .button:active {
        background: #f90;
        color: rgba(255, 255, 255, 0.6);
    }
    .process .wrap::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #fff;
        left: -6px;
        top: 24px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .process .state {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 20px;
        z-index: 1;
    }
    .process .state_1 {
        background-position: -42px -23px;
    }
    .process .state_2 {
        background-position: 0 -23px;
    }
    .process .state_3 {
        background-position: -21px -23px;
    }
    .process .line {    
        position: absolute;
        width: 2px;
        height: 100%;
        left: 7px;
        top: 27px;
        background-repeat: repeat-y;    
        -webkit-background-size: 2px auto;
        background-size: 2px auto;
    }
    .state_1 + .line {
        background-image: url(../../static/imgs/line_gray.png);
    }
    .state_2 + .line {
        background-image: url(../../static/imgs/line_green.png);
    }
    .state_3 + .line {
        background-image: url(../../static/imgs/line_red.png);
    }
    .process .module:last-child .line {
        display: none;
    }
    .tag {
        display: inline-block;
        height: 16px;
        line-height: 16px;
        padding: 0 8px; 
        position: relative;
        font-size: 10px;
        border-radius: 2px;
    }
    .process .tag {
        float: left;
        margin: 7px 0 0 15px;
    }
    .tag::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        border-radius: 4px;
        left: 0;
        top: 0;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box; 
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .tag_1 {
        background: rgba(135, 159, 218, 0.05);  
        color: rgb(153, 157, 166);  
    }
    .tag_1::after {
        border-color: rgb(153, 157, 166);
    }
    .tag_2 {
        background: rgba(127, 194, 92, 0.05);
        color: rgb(137, 193, 108);
    }
    .tag_2::after {
        border-color: rgb(137, 193, 108);
    }
    .tag_3 {
        background: rgba(243, 131, 84, 0.05);
        color: rgb(243, 131, 85);
    }
    .tag_3::after {
        border-color: rgb(243, 131, 85);
    }
    .process .top .time {
        float: right;
        font-size: 24px;
        color: rgb(255, 170, 0);
        margin-left: 12px;
    }
    .process .location {
        font-size: 12px;
        color: #999;
        line-height: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 10px 0 12px;
    }
    .process .location .icon-location {
        float: left;
        width: 12px;
        height: 12px;
        background-position: -34px -126px;
        margin: 2px 6px 0 0;
    }
    .pic-wrap {
        position: relative;
        margin-top: 10px;
        min-height: 16px;
    }
    .pic-list {
        overflow: hidden;
    }
    .pic-list li {
        float: left;
        margin-right: 8px;
        position: relative;
    }
    .pic-list img {
        display: block;
        width: 60px;
        height: 60px;
    }
    .pic-list .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 60px;
    }
    .pic-list .mask span {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 2px;
        border-radius: 50%;
    }
    .pic-wrap .link {   
        position: absolute;
        right: 0;
        bottom: 0;
        line-height: 16px;
    }
    .process a {
        color: rgb(68, 153, 255);
    }
    .process .remark {
        margin-top: 20px;
        font-size: 12px;
        line-height: 16px;
        position: relative;
        color: rgb(153, 153, 153);
        position: relative;
        padding-top: 15px;
        word-wrap: break-word;
        word-break: break-all;
    }
    .remark em {
        color: rgb(102, 102, 102);
        margin-right: 8px;
        font-style: normal;
    }
    .process .remark::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgb(229, 229, 229);
        left: 0;
        top: 0;
        transform: scale3d(1, 0.5, 1);
        -webkit-transform: scale3d(1, 0.5, 1);
    }
    .process .remark.tip {
        color: rgb(243, 131, 85);
    }
    .remark + .remark.tip, .top + .remark {
        margin-top: 15px;
    }
    .location-detect {
        height: 48px;
        line-height: 48px;
        background: #fff;
        padding: 0 12px;
        font-size: 16px;
        overflow: hidden;
        position: relative;
    }
    .location-detect .title {
        float: left;
        color: #999;
        margin-right: 18px;
    }
    .location-detect .link {
        float: right;
        font-size: 14px;
        color: rgb(68, 153, 255);
        margin-left: 18px;
    }
    .location-detect .current { 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;    
    }
    .location-detect::after {
        content: "";
        width: 100%;
        height: 1px;
        background: rgb(229, 229, 229);
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .location-detect::after {
        left: 12px;
    }
    .remark-input {
        width: 100%;
        height: 160px;
        background: #fff;
        border: none;
        resize: none;
        outline: none;
        padding: 12px;
        font-size: 16px;
        line-height: 22px;
        box-sizing: border-box;
    }
    .weui-gallery__img {
        bottom: 0;
    }
    .weui-actionsheet {
        background: transparent;
    }
    .weui-actionsheet__cell.tip {
        font-size: 12px;
        color: rgb(170, 170, 170);
        height: 56px;
        line-height: 56px;
        padding: 0;
    }
    .weui-actionsheet__cell.delete {
        color: rgb(243, 131, 85);
    }

    /* statistics */
    .statistics .section {
        background: #fff;
        margin-bottom: 12px;
    }
    .statistics .chart {
        padding: 12px 12px 24px;
    }
    .statistics .chart h2 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 20px;
        font-weight: normal;
    }
    .statistics .chart img {
        display: block;
        width: 110px;
        height: 110px;
        margin: 0 auto;
    }
    .statistics .date {
        height: 44px;
        line-height: 44px;  
        font-size: 16px;    
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .statistics .date .btn_pre, .statistics .date .btn_nxt {
        display: inline-block;
        width: 22px;
        height: 22px;
        position: relative;
        top: 11px;  
    }
    .statistics .date .btn_pre:after, .statistics .date .btn_nxt:after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-width: 0 0 2px 2px;
        border-style: solid;
        border-color: #fa0;
        left: 50%;
        top: 50%;
        margin-top: -4px;
    }
     .statistics .date .btn_pre::after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: -3px;
    }
    .statistics .date .btn_nxt::after {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        margin-left: -6px;
    } 
    .statistics .date span {
        margin: 0 20px;
    }
    .mod-count ul {
        overflow: hidden;
    }
    .mod-count li {
        float: left;
        width: 33.33%;
        position: relative;
    }
    .mod-count a {
        display: block;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 12px;
        color: #bbb;
    }
    .mod-count a:active {
        background: #fafafa;
    }
    .mod-count em {
        font-size: 18px;
        color: #666;
        margin: 0 4px 0 12px;
    }
    .mod-count li::before, .mod-count li::after {
        position: absolute;
        content: "";
        background: #e5e5e5;
        top: 0;
    }
    .mod-count li::before {
        width: 100%;
        height: 1px;
        left: 0;
        -webkit-transform: scale3d(1, 0.5, 1);
        transform: scale3d(1, 0.5, 1);
    }
    .mod-count li::after {
        width: 1px;
        height: 100%;
        right: 0;
        -webkit-transform: scale3d(0.5, 1, 1);
        transform: scale3d(0.5, 1, 1);
    }
    .mod-count li:nth-child(3n)::after {
        display: none;
    }
    .weui-cell__ft .count-data {
        font-size: 14px;
        color: #ccc;
        line-height: 24px;
    }
    .weui-cell__ft .count-data em {
        color: #999;
        margin-left: 10px;
    }
    .weui-cell__ft .tag {
        margin-right: 6px;
        top: -2px;
    }
    .section + .weui-cells__title {
        margin-top: -12px;
    }

    /* user */
    .mod-user a {
        display: block;
        padding: 10px 12px;
        overflow: hidden;
        background: #fff;
    }
    .mod-user a:active {
        background: #fafafa;
    }
    .mod-user .avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .mod-user .info {
        margin-left: 62px;
    }
    .mod-user .name {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 4px;
    }
    .mod-user .team {
        color: #999;
        line-height: 20px;
    }
    .mod-user .name, .mod-user .team {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 70px;
    }
    .mod-user .phone {
        width: 18px;
        height: 18px;   
        background-position: 0 -44px;
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -9px;
    }
    .mod-user .tag-wrap {
        position: absolute;
        right: 32px;
        top: 50%;
        margin-top: -8px;
        overflow: hidden;
    }
    .mod-user .tag-wrap .tag {
        float: left;
        margin-left: 8px;
    }
    .mod-user .count {
        position: absolute;
        line-height: 20px;
        right: 12px;
        top: 50%;
        margin-top: -10px;
        color: #bbb;
    }
    .mod-user .count span {
        margin-left: 10px;
    }
    .mod-user .count .normal {
        color: rgb(190, 219, 174);
    }
    .mod-user .count .abnormal {
        color: rgb(241, 186, 164);
    }
    .user-list a::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-width: 0 2px 2px 0;
        border-style: solid;
        border-color: #ccc;
        right: 12px;
        top: 50%;
        margin-top: -4px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .user-list .com-border-bottom::after {
        left: 74px;
    }
    .weui-dialog__bd.phone {
        font-size: 18px;
        line-height: 24px;
        color: #fa0;
        padding: 25px 18px;
    }

    /* download */
    .download {
        padding: 100px 0 30px;
        text-align: center;
    }
    .download .icon-download {
        display: block;
        width: 80px;
        height: 87px;
        background: url(../../static/imgs/icons/icon_download.png) no-repeat;
        -webkit-background-size: contain;
        background-size: contain;
        margin: 0 auto 30px;
    }
    .download h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 6px;
    }
    .download .time {
        color: #999;
        line-height: 1;
        margin-bottom: 30px;
    }
    .download .weui-btn {
        display: inline-block;
        width: 128px;
        height: 40px;
        line-height: 40px;
        margin: 0 20px;
    }

    /* attendance set */
    .attendance-set .tip_1 {
        line-height: 20px;
        color: #999;
        margin: 4px 12px 20px;
    }
    .attendance-set .weui-cell__bd .tip {
        color: #999;
        font-size: 14px;
        line-height: 20px;
        margin-top: 2px;
    }
    .edit-items {
        margin-top: 12px;
    }
    .edit-items .item {
        height: 48px;
        padding: 0 12px;
        background: #fff;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }
    .edit-items .item h2 {
        font-weight: normal;
        font-size: 16px;
        -webkit-box-flex: 1;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .edit-items .item .tip {
        font-size: 14px;
        color: #bbb;
        margin-left: 6px;
    }
    .edit-items .btn_edit {
        width: 16px;
        height: 16px;
        background-position: -63px -88px;
    }
    .edit-items .item:not(:last-child)::after {
        left: 12px;
    }
    .item-content {
        position: relative;
        margin-top: -1px;
        z-index: 1;
        margin-bottom: 12px;
    }
    .item-content li {
        padding: 10px 12px 10px 36px;
        background: #fff;
    }
    .item-content h3 {
        color: #666;
        font-weight: normal;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 4px;
    }
    .item-content p {
        color: #bbb;
        line-height: 20px;
        margin-top: 2px;
    }
    .item-content li:not(:last-child)::after {
        left: 36px;
    }
    .item-content .icon {
        position: absolute;
        width: 16px;
        height: 16px;   
        left: 10px;
        top: 14px;
    }
    .item-content .icon_1 {
        background-position: 0 -238px;
    }
    .item-content .icon_2 {
        background-position: -21px -238px;
    }
    .item-content .icon_3 {
        background-position: -42px -238px;
    }
    .location-list li {
        padding: 12px;
        background: #fff;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }
    .location-list .location {
        -webkit-box-flex: 1;
        flex: 1;
        margin-right: 20px;
        overflow: hidden;
    }
    .location-list h2 {
        font-size: 16px;
        line-height: 22px;
        font-weight: normal;
        margin-bottom: 4px;
    }
    .location-list p {
        color: #999;
        line-height: 20px;
    }
    .location-list h2, .location-list p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .location-list .btn_delete {
        width: 18px;
        height: 18px;
        background-position: -46px 0;
    }
    .weui-cells__title .delete {
        float: right;
        color: #fa0;
    }
    .attendance-set .btn_add {
        display: block;
        height: 48px;
        line-height: 48px;
        color: #fa0;
        text-align: center;
    }
    .attendance-set .btn_add::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-position: -63px -23px;
        margin-right: 6px;
        vertical-align: middle;
    }
    .attendance-set .btn_add span {
        vertical-align: middle;
    }
    .attendance-set .week-set {
        margin-top: -1px;
    }
    .week-set .week-list {
        padding: 18px 6px 3px;
        overflow: hidden;
    }
    .week-set .week-list::before {
        left: 12px;
    }
    .week-set .week-list li {
        float: left;
        width: 20%;
        padding: 0 6px 15px;
        box-sizing: border-box;
    }
    .week-set .week-list a {
        width: 100%;
    }

    /* sign in tip */
    .signin-tip {
        position: absolute;
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
        background: #fff;
        font-size: 12px;
        color: #666;
        border-radius: 4px;
        z-index: 999;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.07);
    }
    .signin-tip::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1px solid rgba(150, 150, 150, 0.24);
        box-sizing: border-box;
        border-radius: 4px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    .signin-tip .arrow {
        position: absolute;
        width: 15px;
        height: 15px;
        background: #fff;
        border-width: 0 0 1px 1px;
        border-style: solid;
        border-color: rgba(150, 150, 150, 0.24);
        left: 50%;
        bottom: 0;
        margin: 0 0 -8px -8px;
        transform: rotate(-45deg) scale(0.5);
        -webkit-transform: rotate(-45deg) scale(0.5);
        z-index: 1;
    }
    .signin-tip.location {
        padding-left: 14px;
    }
    .signin-tip.location::before {  
        content: "";
        position: absolute;
        width: 6px;
        height: 100%;
        background: rgb(36, 140, 255);
        left: 0;
        top: 0;
        border-radius: 4px 0 0 4px;
        z-index: 1;
    }

    /* form remind */
    .remind-time .icon_time {
        width: 17px;
        height: 16px;
        background-position: -1px -536px;
        margin-right: 10px;
    }
    .remind-time .btn_delete {
        width: 18px;
        height: 18px;
        background-position: -27px -536px;
    }
</style>


